


<template>
  <div>
    <el-button @click="addDialogVisible = true">添加</el-button>

    <el-dialog :visible.sync="addDialogVisible" title="添加数据" width="50%">
      <el-form>
        <el-form-item label="名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model.number="form.age"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: '',
        address: ''
      },
      addDialogVisible: false
    };
  },
  methods: {
    handleAdd() {
      console.log('添加数据', this.form);

      // TODO: 处理保存逻辑

      this.form = {
        name: '',
        age: '',
        address: ''
      };
      this.addDialogVisible = false;
    }
  }
};
</script>